<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ群管理系统</title>
    <link rel="stylesheet" href="/CSS/bootstrap.css">
    <link rel="stylesheet" href="/CSS/BackgroundSelect.css">
    <link rel="stylesheet" href="/CSS/AddMembers.css">
    <script src="/jquery.min.js"></script>
    <script src="/bootstrap.js"></script>
</head>
<style>
    /* 最多添加13个群员 群上限是14个成员 */
    /* 我告诉你我喜欢你 */
            /* 并不是一定要在一起 */
                /* 只是希望你在人生低谷的时候 */
                    /* 不要灰心!至少有人曾经被你的魅力所吸引 */
    /* 你我山前未相遇 */
        /* 山后亦然别相逢 */
            /* ————《郭源潮》宋冬野 */
    /* 青涩不及当初 */
        /* 聚散不由你我 */
        input{
            outline: none;
            font-family: cursive;
        }
    
        body{
        background: #1e201fd7 url("image/bg2.jpg")no-repeat;
        background-size: 100% ;
    }
    #yangxz:hover{
        background-color: rgba(255, 255, 255, 0.363);
        box-shadow: 0px 0px 3px rgb(0, 0, 0,.9);
    }

    ::-webkit-scrollbar { 
    display: none; 
    }
    /* 调整窗口放大致100%时 头部导航的圆角边框去除 */
    @media (min-width: 1536px){
        .navbar {
            border-radius: 0px;
            border: 0px;
        }
    }
    .navbar .container-fluid .navbar-header a.navbar-brand,
    .navbar-inverse .navbar-nav li a{
        color: rgb(240, 195, 112);
        font-size: 17px;
        line-height: 25px;
        /* transition: .4s; */
        text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.9);
    }
    .navbar .container-fluid .navbar-header a.navbar-brand{
        color: rgb(240, 195, 112);
        font-size: 22px;
    }
    .navbar-inverse .navbar-nav li a{
        margin-left: 30px;
    }
    .navbar.navbar-inverse{
        opacity: .8;
    }
    /* 将图片社会 */
    .img-responsive{
        display: inline; 
        


    }
    /* 取消上边框 */
    .table-responsive .table thead{
        border-radius: 10px;
        border-bottom: 0px solid rgba(255, 255, 255, 0.5)
    }
    .table-responsive .table tbody{
        border: 0px;
        transition: .2s;
        
    }
    /* 移入表格除了第一排其他颜色逐变 */
    .table-responsive .table thead:nth-child(1) tr{
        background-color:rgba(73, 73, 71, 0.369) ;
    }
    .table-responsive .table tbody.on tr{
        background-color:#e6c61069 ;
        border-top: 1px solid #e6c61069 ;
    }


    .table-responsive .table thead tr th{
        font-size: 17px;
        line-height:26px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding:10px 20px;
    }

    .table-responsive .table tbody tr td{
        padding:10px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 26px;
        font-size: 14px;
        color: #292828;
        text-shadow: 7px 0px 7px #f0881156;
    }
    .table-responsive .table tbody tr td a{
        transition: .3s;
        color: #4b4848;
        text-decoration:none;
    }
    .table-responsive .table tbody tr td a:hover{
        color: #f5440e;
    }
    .table-responsive .table tbody tr td a:active{
        color: #cf3809;
    }
    .table-responsive .table tbody:nth-child(1):hover{
    color: #292828;
    cursor: default;
    }
    
    .bgcolor{
        position: absolute;
        top: 740px;
        background-color: rgba(0, 0, 0, 0.6);
        width: 100%;
        line-height: 30px;
        height:120px;
    }




    /* 底部区块Begin */
    .bgcolor p {
        font-size:16px;
        color: rgb(189, 189, 189);
        text-shadow: 3px 0px 7px rgba(255, 255, 255, 0.9);
    }
    .bgcolor p a{
        transition: .3s;
        text-decoration:none;
        font-size: 14px;
        color: rgb(212, 211, 211);
        text-shadow: 3px 0px 7px rgba(255, 255, 255, 0.9);
    }
    .bgcolor p a:hover{
        color: #f0ae33;
    }
    .bgcolor p a:active{
        color: #b48834;

    }
    /* 底部区块GND */
    /* 控制行Begin */

    
    /* 控制行GND */
    .list-group{
        margin-bottom: 0px;
    }
    .list-group .list-group-item{
        font-size: 26px;
        line-height: 65px;
        font-weight: bold;
        font-family: cursive;
        text-shadow:2px 3px 7px   rgb(209, 45, 141);
        height: 80px;
        border-radius: 0;
        border: 0px;
        border-bottom: 2px solid rgba(255, 255, 255, 0.5);
        margin: 0px auto;
        width: 85%;
        background: rgba(148, 86, 99, 0.336);
        color: rgb(209, 45, 141);
    }
    /* 权限操作 */
    .JurisdictionWd{
        margin: 0px auto;
        width: 85%;
        padding: 0px;
    }
    .JurisdictionWd .jurisdiction{
        font-size: 17px;
        line-height: 60px;
        height: 60px;
        font-weight: bold;
        font-family: cursive;
        color: rgb(129, 126, 121);
        text-shadow:3px 4px 7px   rgb(221, 78, 162);
        border-bottom: 2px solid rgba(255, 255, 255, 0.5);
        margin: 0px auto;
        background: rgba(255, 255, 255, 0.5);
        color: rgb(221, 78, 162);
    }
    .selectshow:focus{
        box-shadow: 0 0 10px rgba(49, 49, 49, 0.8);
    }
    .btnselectshow:hover,
    .addsystem:hover{
        box-shadow: 0 0 10px rgb(0, 0, 0);
    }
    .btnselectshow:active,
    .addsystem:active{
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }


</style>
<body>

        <!-- 头部导航栏 -->
        <nav class="navbar navbar-inverse black" role="navigation">
            <div class="container-fluid">
            <div class="navbar-header ">
                <a class="navbar-brand" href="javascript:;">Group Management System</a>
            </div>
            <div>
                <ul class="nav navbar-nav pull-right">
                    <!-- active 类 为选中的元素添加黑色背景 -->
                    <li class=""><a href="javascript:;">User</a></li>
                    <li><a href="javascript:;">Add</a></li>
                    <li class="dropdown">
                        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                            background <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:;">Classic grey</a></li>
                            <li><a href="javascript:;">Eye care</a></li>
                            <li><a href="javascript:;">Cool purple</a></li>
                            <li><a href="javascript:;">Bright green</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            </div>
        </nav>

        <!-- 将表格放在table-responsive类盒子里 会变成响应式表格 -->
        <div  class="table-responsive">
            <!-- 群ID -->
            <ul class="list-group">
                <li class="list-group-item">全国精神病集中放疗馆（666666666）</li>
            </ul>
            <!-- 权限部分 -->
            <div class="container JurisdictionWd">
                <div class="row jurisdiction">
                    <div class="col-md-6 pull-left">群成员人数：
                        <!-- 添加成员按钮 -->
                        <!-- 添加成员按钮 -->
                        <!-- 添加成员按钮 -->
                        <p id="CountPeople" style="display: inline;color: rgb(202, 10, 241);">6</p>&nbsp;/20
                        <button style="background-color: rgba(0, 0, 0);
                        opacity: .6;
                        border: 0px;
                        margin-bottom: 5px;
                        font-size: 16px;
                        color: white;
                        transition: .2s;
                        text-shadow: 0px 0px 7px rgba(255, 255, 255, .9);
                        border-radius: 14px;
                        width: 150px;
                        outline: none;" type="button" class="btn addsystem" data-toggle="modal" data-target="#myModal" id="addusernamebtn">添加成员</button>


                        <button style="background-color: rgba(0, 0, 0);
                        opacity: .6;
                        border: 0px;
                        margin-bottom: 5px;
                        font-size: 16px;
                        color: white;
                        transition: .2s;
                        text-shadow: 0px 0px 7px rgba(255, 255, 255, .9);
                        border-radius: 14px;
                        width: 150px;
                        outline: none;" type="button" class="btn addsystem"  id="clearusernamebtn">清空所有成员数据</button>
                    </div>
                    <div class="col-md-6 pull-right text-right">
                        <div style="transition: .4s;" class="input-group">
                            <!-- 搜索成员框 -->
                            <!-- 搜索成员框 -->
                            <!-- 搜索成员框 -->
                            <input style="margin: 14px 5px 0px 0px;
                                        width: 200px;
                                        height: 32px;
                                        border: 0px;
                                        border-radius: 20px;
                                        outline: none;
                                        padding-left: 15px;
                                        border-right:1px solid rgba(83, 71, 71, 0.24) ;
                                        transition: .4s;
                                        background-color: rgba(255, 255, 255, 0.4);" type="text" class="pull-right selectshow">
                            <span class="input-group-btn">
                                <!-- 查询按钮 -->
                                <!-- 查询按钮 -->
                                <!-- 查询按钮 -->
                                <button style="background-color: rgba(0, 0, 0, 0.459);
                                            border: 0px;
                                            color: white;
                                            border-right:1px solid rgba(83, 71, 71, 0.24) ;
                                            transition: .2s;
                                            text-shadow: 0px 0px 7px rgba(255, 255, 255, .9);
                                            border-radius: 14px;
                                            outline: none;
                                            "class="btn btnselectshow" type="button">
                                    查询
                                </button>
                            </span>
                        </div><!-- /input-group -->
                    </div>
                </div>
            </div>
            <!-- 表格部分 -->
            <table  class="table container" style="transition: .4s; background: rgba(255, 255, 255, 0.5);width: 85%;margin:0 auto;">
                
                <thead>
                    <tr>
                        <!-- 用户用最多输入32个字符，一个汉字为两个字符 -->
                        <th class="col-md-3">成员</th>
                        <!-- 用户群昵称最多输入20个字符，一个汉字为两个字符 -->
                        <th class="col-md-2">群昵称</th>
                        <th class="col-md-2">QQ号</th>
                        <th class="col-md-1">性别</th>
                        <th class="col-md-1">Q龄</th>
                        <th class="col-md-1">入群时间</th>
                        <th class="col-md-1">权限操作</th>
                    </tr>
                </thead>
                <tbody class="on">
                    <tr>
                        <td><img src="/image/1.jpg" class="img-responsive" alt="Cinque Terre" width="20">2019.11.8:22.42</td>
                        <td>时光荏苒</td>
                        <td>1391625461</td>
                        <td>男</td>
                        <td>16年</td>
                        <td>2019 10 14</td>
                        <td>
                            <a style="margin-left: 16px;" type="button" href="javascript:;">
                                <span style="background-image: url(/image/download.png);
                                            display: block;
                                            position: absolute;
                                            width: 15px;
                                            height: 16px;
                                            top: 277px;
                                            background-repeat: no-repeat;
                                            background-position: 0 -411px;" 
                                id="yangxz" class="img-responsive" alt=""></span>群主
                            </a>
                        </td>
                    </tr>
                </tbody>
        </table>    
    </div>
        <!-- 模态框 --> 
        <!-- 模态框 --> 
        <!-- 模态框 -->
        <div style="background:rgba(196, 41, 162, 0.329);
                    " class="modal fade" id="myModal" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="false" data-backdrop="false" data-keyboard="false">
            <div class="modal-dialog">
                <div style="margin-top: -12px;" class="modal-content AddToColor">

                    <div class="modal-header Addtitile">
                        <h4 class="Addtitiletext text-center" id="myModalLabel">
                            添加群成员
                        </h4>
                    </div>


                    <div style="padding-top:15px;padding-bottom:15px;padding-left:60px;overflow: hidden;" class="modal-body">
                        <!-- 输入框响应盒子 -->
                        <div style="width:600px;" id="Establish" class="container">
                            <label class="Tips" for="">输入的昵称不能大于15</label> 
                            <div class="row">
                                <label for="">成员名字</label>
                                <input class="Member" type="text" placeholder="请输入您的用户名"> 
                            </div>
                            <div class="row">
                                <label for="">本群昵称</label>
                                <input class="GroupNickname" type="text" placeholder="请输入您在本群昵称">
                            </div>
                            <div class="row">
                                <label for="">&nbsp;&nbsp;&nbsp;&nbsp;QQ号</label>
                                <input class="QQnumber" type="text" placeholder="请输入您的QQ账号">
                            </div>
                            <div class="row">
                                <label for="">&nbsp;&nbsp;&nbsp;&nbsp;性别</label>
                                <input class="sex" type="text" placeholder="请输入您的性别(男/女)">
                            </div>
                            <div class="row">
                                <label for="">&nbsp;&nbsp;QQ年龄</label>
                                <input class="QQage" type="text" placeholder="请输入您QQ账号使用的时间">
                            </div>
                            <div class="row">
                                <label for="">入群时间</label>
                                <input class="GroupJoiningTime" type="text" placeholder="请输入群时间(年月日用空格隔开)">
                            </div>
                        </div>
                        
                    </div>

                    <div style="border-top: 1px solid rgb(209, 45, 141);" class="modal-footer ">
                        <button style="outline: none;" type="button" id="addbtn" class="Submit">添加</button>
                        <button style="outline: none;" id="clearbtn" type="button" class="AddTobtn" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="container bgcolor text-center">
            <p>
                友情链接：
                <a href="javascript:;">QQ官方网站</a>
                丨
                <a href="javascript:;">腾讯开放平台</a>
                丨
                <a href="javascript:;">在线教育介绍</a>
                丨
                <a href="javascript:;">QQ会员</a>
                丨
                <a href="javascript:;">内涵段子</a>
                丨
                <a href="javascript:;">皮皮虾</a>
            </p>
            <p>Copyright © 1998-2015 Tencent. All Rights Reserved.</p>
            <p>杨旭征 个人版权所有</p>
        </div>
        <!-- 公共对象（其他的对象都要调用的） -->
        <script language = "JavaScript" src="/JS/main_public.js"></script>
        <!-- 添加用户JS -->
        <script language = "JavaScript" src="/JS/main_Add.js"></script>
        <!-- 实时更新的JS -->
        <script language = "JavaScript" src="/JS/main_RTU.js"></script>
        <!-- 移除用户 -->
        <script language = "JavaScript" src="/JS/main_delete.js"></script>
        <!-- 修改用户数据 -->
        <script language = "JavaScript" src="/JS/main_modify.js"></script>
        <!-- 查找用户 -->
        <script language = "JavaScript" src="/JS/main_lookup.js"></script>
        <script language = "JavaScript">
            $(function(){
                // //当点击取消按钮时，将input框框内的值全部清空，以免再次进入的时候，关闭前的vaule的值还残留在input框内
                // $("#clearbtn").click(function(){
                //     //jQuery选择器选择ID为Establish的元素下的类名为row的元素的子元素input，使用each遍历所有input框
                //     $("#Establish .row").children("input").each(function(){
                //         //将每个input框内的值赋值空（清空
                //         $(this).val("");
                //         // console.log($(this).val(""););
                //     });
                // });

                $("#clearusernamebtn").click(function(){
                    localStorage.clear();
                    window.location.reload();
                })
            });
        </script>
        
    </body>
</html>